<template>
	<view class="outer-wrap">
		<view class="card">
			<view class="card-title">车位信息</view>
			<view class="card-row">
				<text class="card-label">设备编号</text>
				<text class="card-value">{{ info.num }}</text>
			</view>
			<view class="card-row">
				<text class="card-label">额定功率</text>
				<text class="card-value">{{ info.chargingSpeed }}</text>
			</view>
			<view class="card-divider"></view>
			<view class="card-title">价格信息</view>
			<view class="card-row">
				<text class="card-label">单价</text>
				<text class="card-value">{{ info.price || '-' }} 元/度</text>
			</view>
			<view class="card-row">
				<text class="card-label">时段</text>
				<text class="card-value">{{ info.startTime || '-' }}-{{ info.endTime || '-' }}</text>
			</view>
		</view>
		<view class="card">
			<view class="card-title">账户信息</view>
			<view class="card-row">
				<text class="card-label">支付方式</text>
				<text class="card-value">账户余额</text>
			</view>
			<view class="card-row" v-if="info.balance">
				<text class="card-label">账户余额</text>
				<view class="card-value" style="display:flex;align-items:center;justify-content:flex-end;">
					<text style="margin-right:20rpx;">{{ info.balance }}元</text>
					<text style="color: #FAB98B; text-decoration: underline;" @click="onClick">去充值</text>
				</view>
			</view>
			<view class="card-row">
				<text class="card-label">充电策略</text>
				<view>
					<text class="btn-s" :class="[form.mode == 0 ? 'btn-active' : 'btn-d']" @click="form.mode = 0">充满自停</text>
					<text class="btn-s" :class="[form.mode == 1 ? 'btn-active' : 'btn-d']" style="margin: 0 20rpx;" @click="form.mode = 1">限定金额</text>
					<text class="btn-s" :class="[form.mode == 2 ? 'btn-active' : 'btn-d']" @click="form.mode = 2">限定SOC</text>
				</view>
			</view>
			<view class="card-row" v-if="form.mode == 1">
				<text class="card-label">充电金额</text>
				<view class="card-value" style="display:flex;align-items:center;justify-content:flex-end;">
					<input class="text-2 fill" v-model="form.money" style="text-align: right;padding-right: 20rpx;width: 120rpx;" type="text" value="" placeholder="请输入充电金额" />
					<text style="margin-left: 8rpx;">元</text>
				</view>
			</view>
			<view class="card-row" v-if="form.mode == 2">
				<text class="card-label">充电SOC</text>
				<view class="card-value" style="display:flex;align-items:center;justify-content:flex-end;">
					<input class="text-2 fill" v-model="form.soc" style="text-align: right;padding-right: 20rpx;width: 120rpx;" type="text" value="" placeholder="请输入充电SOC" />
					<text style="margin-left: 8rpx;">%</text>
				</view>
			</view>
			<view class="card-divider"></view>
			<!-- <view class="card-row" @click="navTo('/pages/public/fuwenben?type=2&name=使用教程')">
				<text class="card-label">使用教程</text>
				<u-icon name="arrow-right" size="24" color="#CCCCCC"></u-icon>
			</view>
			<view class="card-row" @click="navTo(`/pages/public/declare?num=${form.num}`)">
				<text class="card-label">故障申报</text>
				<u-icon name="arrow-right" size="24" color="#CCCCCC"></u-icon>
			</view> -->
		</view>
		<view class="main-con footer" style="margin-top: 20rpx;">
			<view class="items-center justify-between">
				<view class="start-btn flex-row items-center justify-center" hover-class="hover-opacity" @click="submit">
					<image src="/static/img/xiaoxi.png" mode="" class="c-icon"></image>
					<view class="s-btn" >点击开始充电</view>
				</view>
			</view>
		</view>
		<model ref="model" :info="modelInfo" isModel="2"></model>
		<mix-loading v-if="isLoading"></mix-loading>
		<u-popup mode="center" v-model="show" :maskCustomStyle="maskCustomStyle" :mask-close-able="false">
			<u-circle-progress ref="progress" active-color="#fe642b" :percent="100" duration="2000" @end="progressOnEnd">
				<view class="u-progress-content">
					<view class="u-progress-dot"></view>
					<text class="u-progress-info">连接中</text>
				</view> 
			</u-circle-progress>
		</u-popup>
	</view>
</template>
<script>
	import model from "../../components/modal/model.vue"
export default {
	components:{
		model
	},
	data() {
		return {
			loaded: false, // 添加loaded变量控制内容显示
			orderId: '',
			show: false,
			maskCustomStyle: {
				opacity: 0
			},
			info: {},
			cartName: '',
			form: {
				mode: 0,
				money: '',
				soc: '',
				carId: '',
				num: ''
			},
			modelInfo:{},
			activeList:[]
		};
	},
	onLoad(options) {
		console.log(options)
		if (options.num) this.form.num = options.num;
		if(options.q){
			this.form.num=(decodeURIComponent(options.q).split('?')[1]).split('=')[1];
		}
		// this.form.num='32010600115504-01'
	},
	onShow() {
		this.loadData();
	},
	methods: {
		handlePrice(){
			getApp().globalData.activeList = this.activeList
			this.navTo('./ordermoney')
		},
		onClick() {
			this.navTo('/pages/tabs/chong')
		},
		async loadData() {
			console.log('===开始加载充电桩信息===');
			uni.showToast({
				title: '开始加载数据',
				icon: 'none',
				duration: 1000
			});
			if(!uni.getStorageSync('uid')){
				console.log('未找到uid，需要重新登录');
				// #ifdef APP-PLUS
				this.navTo('/pages/login/login');
				// #endif
				// #ifndef APP-PLUS
				this.navTo('/pages/public/login'); 
				// #endif
				return
			}
			const data = {
				uid: uni.getStorageSync('uid'),
				num: this.form.num
			};
			console.log('请求参数:', data);
			try {
				const res = await this.$request('recharge/scan', data, { showLoading: true });
				console.log('API响应结果:', res);
				if (res.result == 0) {
					if(res.data.status == '2'){
						uni.showModal({
							content:'此充电桩已被使用',
							showCancel:false,
							success:(e)=>{
								if(e.confirm){
									this.switchTab('/pages/tabs/home')
								}
							}
						})
					}
					this.info = res.data;
					this.activeList = res.atRechargeStationPriceList
					this.loaded = true; // 数据加载成功，设置loaded为true使内容可见
					// this.getCurrentTime();
				} else {
					console.log('充电桩信息获取失败:', res);
					uni.showToast({
						title: '请求失败: ' + (res.resultNote || '未知错误'),
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						uni.showModal({
							title: '请求失败',
							content: res.resultNote || '获取充电桩信息失败',
							showCancel: false,
							success: (e) => {
								if(e.confirm) {
									uni.switchTab({url: '/pages/tabs/home'});
								}
							}
						});
					}, 800);
				}
			} catch (error) {
				console.error('API请求发生异常:', error);
				uni.showToast({
					title: '请求异常: ' + error.message,
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.showModal({
						title: '请求异常',
						content: '获取充电桩信息时发生异常: ' + error.message,
						showCancel: false,
						success: (e) => {
							if(e.confirm) {
								uni.switchTab({url: '/pages/tabs/home'});
							}
						}
					});
				}, 800);
			}
		},
		async getDeafultCart() {
			const data = {
				uid: uni.getStorageSync('uid'),
				pageNo: '1',
				pageSize: '10'
			};
			const res = await this.$request('user/my-car-list', data, { showLoading: true });
			if (res.result == 0) {
				if (res.data && res.data.list) {
					let array = res.data.list.filter(item => item.isDefult == 1);
					this.form.carId = array[0].id;
					this.cartName = array[0].name + array[0].name1 + array[0].name2;
				}
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		progressOnEnd() {
			this.show = false;
			uni.redirectTo({
				url:`/pages/order/details?id=${this.orderId}`
			})
		},
		async submit() {
			if(this.info.status == 2) return this.$msg('充电桩正在充电中')
			const { mode, money, soc, carId, num } = this.form;
			// if (carId == '') {
			// 	this.$util.msg('请选择充电车	辆!');
			// 	return;
			// }
			if (mode == 1 && money == '') {
				this.$util.msg('请输入限定金额!'); 
				return;
			}
			if (mode == 2 && soc == '') {
				this.$util.msg('请输入限定SOC!');
				return;
			}
			const data = {
				uid: uni.getStorageSync('uid'),
				money,
				mode,
				soc,
				num,
				carId
			};
			// console.log(data)
			const res = await this.$request('recharge/start', data, { showLoading: true });
			if (res.result == 0) {
				this.orderId = res.data.id;
				this.show = true;
				this.$nextTick(()=>{
					this.$refs.progress.init()
				})
			} else {
				this.modelInfo = {
					title:'温馨提示',
					content:res.resultNote,
					btn:'确定'
				}
				this.$refs.model.open()
				// this.$util.msg(res.resultNote);
			}
		},
		setCartItem(item) {
			if (item.id) {
				this.form.carId = item.id;
				this.cartName = item.name + item.name1 + item.name2;
			} else {
				this.form.carId = '';
				this.cartName = '';
			}
		},
		async downFn(){
			let res = await this.$request('down',{
				num:this.info.dn,
				uid:uni.getStorageSync('uid')
			},{ showLoading: true })
			if(res.result == '0'){
				this.loadData()
				this.$util.msg('落锁成功')
			} else {
				this.$util.msg(res.resultNote);
			}
		}
		// getCurrentTime(){
		// 	let hours=new Date().getHours();
		// 	let inutes=new Date().getMinutes();
		// 	let timeInfoArray=this.info.atRechargeStationPriceList;
		// 	for(let i;i<timeInfoArray.length;i++){
		// 		if(hours>timeInfoArray)
		// 	}
		// }
	}
};
</script>
<style scoped lang="scss">
.u-progress-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.u-progress-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #fb9126;
}

.u-progress-info {
	font-size: 28rpx;
	padding-left: 16rpx;
	letter-spacing: 2rpx;
}
.s-text-con {
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
	padding: 30rpx 0;
}
.s-text {
	color: #FAB98B;
	text-decoration: underline;
}
.s-btn {
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	margin-left: 20rpx;
}
.c-icon {
	width: 30rpx;
	height: 35rpx;
}
.main-con {
	background: #ffffff;
	padding: 20rpx;
}
.z-title {
	border-bottom: 1px solid #FAB98B;
	padding: 20rpx 0;
}
.p-icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}
.content {
	padding: 0 20rpx;
}
.item {
	// height: 325rpx;
	background: #ffffff;
	border: 1rpx solid rgba(218, 218, 218, 0.18);
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.item-top {
	padding: 30rpx;
}
.item-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #333333;
}
.item-d {
	padding: 50rpx 0;
}
.item-price {
	font-size: 26rpx;
	font-weight: bold;
	color: #FAB98B;
}
.item-c {
	font-size: 22rpx;
	font-weight: 500;
	color: #666666;
}
.item-u {
	font-size: 22rpx;
	color: #333333;
	font-weight: 500;
	margin-left: 10rpx;
}
.item-status {
	width: 122rpx;
	height: 122rpx;
	border-radius: 50%;
	font-size: 26rpx;
	font-weight: bold;
	color: #FAB98B;
	border: 8rpx solid #FAB98B;
	background: #fff;
}
.active {
	border: 8rpx solid #FAB98B;
}
.li {
	border: 8rpx solid #FAB98B;
}
.zhong {
	border: 8rpx solid #FAB98B;
}
.kong {
	border: 8rpx solid #FAB98B;
}
.item-s {
	font-size: 24rpx;
	font-weight: 500;
	color: #86878b;
	width: 130rpx;
}
.item-bottom {
	height: 86rpx;
	background: #eff8ff;
	border-radius: 0px 0px 20rpx 20rpx;
	padding: 0 30rpx;
}
.btn {
	width: 89rpx;
	height: 48rpx;
	text-align: center;
	border-radius: 24rpx;
	line-height: 48rpx;
	font-size: 26rpx;
	font-weight: 500;
}
.one {
	background: $uni-color-bg;
	color: #fff;
}
.two {
	background: #246697;
	color: #ffffff;
}
.bottom-text {
	font-size: 26rpx;
	font-weight: 500;
	color: #333333;
	margin-left: 24rpx;
}
.img {
	height: 110rpx;
	width: 709rpx;
}
.btn-s {
	width: 132rpx;
	height: 48rpx;
	text-align: center;
	line-height: 48rpx;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
}
.btn-d {
	border: 1rpx solid #cccccc;
}
.btn-active {
	border: 1rpx solid #FAB98B;
	color: #FAB98B;
}
.group-1 {
	padding: 20rpx 0;
}
.text-1 {
	font-size: 24rpx;
	font-weight: normal;
	color: #666666;
}
.text-2 {
	font-size: 24rpx;
	font-weight: normal;
	color: #999999;
}
.start-btn {
	width: 458rpx;
	height: 88rpx;
	background: #FAB98B !important;
	border-radius: 44rpx;
	color: #fff !important;
}
.btn-lock{
	width: 180rpx;
	height: 88rpx;
	background: $uni-color-bg;
	border-radius: 44rpx;
	color: #fff;
	line-height: 88rpx;
	text-align: center;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: 30rpx;
}
.grayscale{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.outer-wrap {
	padding: 30rpx;
	box-sizing: border-box;
	min-height: 100vh;
	background: #f5f6fa;
}
.card {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba(180, 180, 180, 0.10);
	margin-bottom: 30rpx;
	padding: 32rpx 28rpx;
}
.card-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 18rpx;
}
.card-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18rpx;
}
.card-label {
	font-size: 28rpx;
	color: #888;
	min-width: 120rpx;
}
.card-value {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	text-align: right;
	flex: 1;
}
.card-divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 18rpx 0;
}
</style>
